/*
 * @Author: wangqizhang
 * @Date: 2024-05-03 16:44:15
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-04 11:40:38
 * @FilePath: /suixinji-react/src/components/Echarts/index.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import * as echarts from 'echarts';
import { useLayoutEffect } from 'react';
const Echarts = () => {
  useLayoutEffect(() => {
    var chartDom = document.getElementById('echarts');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '个人数据统计图',
        subtext: 'Fake Data',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Rainfall', 'Evaporation'],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          // prettier-ignore
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '笔记数量',
          type: 'bar',
          data: [0, 10, 12, 13, 14, 15, 20, 23, 24, 25, 26, 27],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' },
            ],
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }],
          },
          itemStyle: {
            color: '#0099ff',
          },
        },
        {
          name: '分组数量',
          type: 'bar',
          data: [1, 2, 3, 4, 6, 8, 12, 13, 14, 15, 16, 17],
          markPoint: {
            data: [
              { name: 'Max', value: 12, xAxis: 7, yAxis: 12 },
              { name: 'Min', value: 1, xAxis: 11, yAxis: 3 },
            ],
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }],
          },
          itemStyle: {
            color: '#ff9900',
          },
        },
      ],
    };

    option && myChart.setOption(option);
  });
  return <div id="echarts" style={{ width: '100%', height: '100%' }}></div>;
};
export default Echarts;
